<template>
  <div class="login-container">
    <!-- 左侧装饰区域 -->
    <div class="decorative-section">
      <div class="hospital-icon">
        <img :src="logoUrl" alt="">
      </div>
      <h1>智医云联</h1>
      <p>便捷预约，高效就医，为您的健康保驾护航</p>
      
      <!-- 新增毛笔字标语 -->
      <div class="slogan-section">
        <div class="slogan-text">人民医疗为人民</div>
        <div class="slogan-decoration">
          <div class="decoration-line"></div>
          <div class="decoration-dot"></div>
          <div class="decoration-line"></div>
        </div>
      </div>
    </div>

    <!-- 右侧登录表单 -->
    <div class="login-form-section">
      <div class="login-card">
        <div class="form-header">
          <h2>用户登录</h2>
          <p>请输入您的账号信息访问系统</p>
        </div>

        <el-form :model="formData" @submit.prevent="handleSubmit">
          <div class="form-item">
            <label>用户名</label>
            <el-input
              v-model="formData.username"
              placeholder="请输入用户名"
              :class="{ error: errors.username }"
              @blur="validateUsername"
            >
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
            <div class="error-message" v-if="errors.username">
              <el-icon><Warning /></el-icon>
              <span>{{ errors.username }}</span>
            </div>
          </div>

          <div class="form-item">
            <label>密码</label>
            <el-input
              v-model="formData.userpass"
              type="password"
              placeholder="请输入密码"
              :class="{ error: errors.userpass }"
              show-password
              @blur="validatePassword"
            >
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
            <div class="error-message" v-if="errors.userpass">
              <el-icon><Warning /></el-icon>
              <span>{{ errors.userpass }}</span>
            </div>
          </div>

          <el-button
            type="primary"
            class="login-btn"
            :loading="isSubmitting"
            native-type="submit"
          >
            {{ isSubmitting ? "登录中..." : "登录系统" }}
          </el-button>
        </el-form>

        <div class="additional-options">
          <div class="remember-me">
            <el-checkbox v-model="rememberMe">记住我</el-checkbox>
          </div>
          <a class="forgot-password" href="#">忘记密码?</a>
        </div>
      </div>

      <div class="footer">
        <p>© 2025-2026 智医云联 | 智慧医疗大脑综合实验平台</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { loginUser } from "@/api/api";
import { ElMessage } from "element-plus";

const router = useRouter();
const store = useStore();

const formData = reactive({
  username: "",
  userpass: "",
});

const errors = reactive({
  username: "",
  userpass: "",
});

const isSubmitting = ref(false);
const rememberMe = ref(false);
// logo图标
const logoUrl = require("@/assets/logo/logo_h.png");

const validateUsername = () => {
  if (!formData.username) {
    errors.username = "用户名不能为空";
  } else if (formData.username.length < 3) {
    errors.username = "用户名长度不能少于3个字符";
  } else {
    errors.username = "";
  }
};

const validatePassword = () => {
  if (!formData.userpass) {
    errors.userpass = "密码不能为空";
  } else if (formData.userpass.length < 6) {
    errors.userpass = "密码长度不能少于6个字符";
  } else {
    errors.userpass = "";
  }
};

const handleSubmit = async () => {
  validateUsername();
  validatePassword();

  if (errors.username || errors.userpass) {
    return;
  }

  isSubmitting.value = true;
  try {
    const res = await loginUser(formData);

    console.log("登录响应：", res);

    // 增加对 res 是否为空的判断
    if (!res) {
      ElMessage({
        message: "请求失败，响应为空",
        type: "error",
      });
    }

    if (res && res.code === 200) {
      store.commit("login", res.data.token);
      // //默认添加一个角色，后期从数据库里读取
      store.commit("setUser", res.data.user);
      ElMessage({
        message: res.msg,
        type: "success",
      });
      await router.push("/");
    } else {
      ElMessage({
        message: res.message || "登录失败，请重试",
        type: "error",
      });
    }
  } catch (error) {
    console.error("登录失败：", error);
    ElMessage({
      message: "登录失败，请检查网络连接",
      type: "error",
    });
  } finally {
    isSubmitting.value = false;
  }
};
</script>

<style lang="scss" scoped>
//设置本地字体
@font-face {
  font-family: 'MyBrushFont';
  src: url('@/assets/fonts/W04.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.login-container {
  display: flex;
  min-height: 100vh;
  background-color: #f5f7fa;

  .decorative-section {
    flex: 1;
    background: linear-gradient(135deg, #1a75bc 0%, #0c4d8c 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    position: relative;

    .hospital-icon {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 2rem;

      img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
    }

    h1 {
      font-size: 2.2rem;
      margin-bottom: 1rem;
      text-align: center;
    }

    p {
      font-size: 1.1rem;
      opacity: 0.9;
      text-align: center;
      max-width: 80%;
      margin-bottom: 3rem;
    }

    .slogan-section {
      text-align: center;
      margin-top: 2rem;
      
      .slogan-text {
        font-family: 'MyBrushFont', 'ZCOOL XiaoWei', serif;
        font-size: 3rem;
        font-weight: 400;
        line-height: 1.2;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        margin-bottom: 1.5rem;
        background: linear-gradient(to bottom, #fff, #e8f4ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 2px;
      }

      .slogan-decoration {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;

        .decoration-line {
          width: 60px;
          height: 2px;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
        }

        .decoration-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(255,255,255,0.8);
        }
      }
    }
  }

  .login-form-section {
    width: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: white;

    .login-card {
      width: 100%;
      max-width: 380px;

      .form-header {
        text-align: center;
        margin-bottom: 2rem;

        h2 {
          font-size: 1.8rem;
          color: #303133;
          margin-bottom: 0.5rem;
        }

        p {
          color: #606266;
          font-size: 0.95rem;
        }
      }

      .form-item {
        margin-bottom: 1.5rem;

        label {
          display: block;
          margin-bottom: 0.5rem;
          font-weight: 500;
          color: #303133;
        }

        :deep(.el-input) {
          &.error {
            .el-input__wrapper {
              box-shadow: 0 0 0 1px #f56c6c inset;
            }
          }
        }

        .error-message {
          display: flex;
          align-items: center;
          color: #f56c6c;
          font-size: 0.85rem;
          margin-top: 0.5rem;

          .el-icon {
            margin-right: 0.3rem;
          }
        }
      }

      .login-btn {
        width: 100%;
        height: 48px;
        font-size: 1.1rem;
        margin-top: 1rem;
        background: linear-gradient(135deg, #1a75bc 0%, #0c4d8c 100%);
        border: none;
      }

      .additional-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.2rem;

        .forgot-password {
          color: #1a75bc;
          text-decoration: none;
          font-size: 0.9rem;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .register-hint {
        text-align: center;
        margin-top: 2rem;
        color: #606266;
        font-size: 0.9rem;

        a {
          color: #1a75bc;
          text-decoration: none;
          font-weight: 500;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .footer {
      margin-top: 3rem;
      text-align: center;

      p {
        font-size: 0.8rem;
        color: #909399;
      }
    }
  }
}

@media (max-width: 900px) {
  .login-container {
    flex-direction: column;

    .decorative-section {
      padding: 1.5rem;

      h1 {
        font-size: 1.8rem;
      }

      p {
        font-size: 1rem;
      }

      .slogan-section {
        .slogan-text {
          font-size: 2.2rem;
        }
      }
    }

    .login-form-section {
      width: 100%;
      padding: 2rem 1.5rem;
    }
  }
}
</style>